<!-- 
	This is the billing page, it uses the dashboard layout in: 
	"./layouts/Dashboard.vue" .
 -->

<template>
	<div>
    <a-row :gutter="24" >
      <a-col :span="24" :lg="24" :xl="24" class="mb-24" >
        <CardInfoTable
            :data="caseInfoList"
            :columns="tableColumns">
        </CardInfoTable>
      </a-col>

    </a-row>

	</div>
</template>

<script>



  import CardInfoTable from "@/components/Cards/CardInfoTable";

  const tableColumns = [
    {
      title: '用户',
      dataIndex: 'user',
      scopedSlots: { customRender: 'user' },
      width: 300,
    },
    {
      title: '信息',
      dataIndex: 'reportInfo',
      scopedSlots: { customRender: 'reportInfo' },
    },
    {
      title: '认证状态',
      dataIndex: 'veri',
      scopedSlots: {customRender: 'veri'}
    },
    {
      title: '案例种类',
      dataIndex: 'type',
      scopedSlots: {customRender: 'type'}
    }

  ];

  // "Projects" table list of rows and their properties.
  const tableData = [
    {
      key: '1',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-6.jpeg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '光遇账号交易被骗500R，求助'
      },
      veri: true,
      type: '账号交易'
    },

    {
      key: '2',
      user: {
        name: 'Sky',
        avatar: 'images/face-2.jpg',
        email: '251@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '原神卖号被骗...揭幕某平台骗子'
      },
      veri: false,
      type: '账号交易'
    },

    {
      key: '3',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-6.jpeg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '请大家不要随便找代练，我已经被代练套路了！'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '4',
      user: {
        name: '羊胎素',
        avatar: 'images/face-3.jpg',
        email: '223223422966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '别再相信王者荣耀什么代练了，亲身被骗'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '5',
      user: {
        name: '展开了',
        avatar: 'images/face-16.jpg',
        email: '1232321966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '原神代练代肝来看看，别被骗子骗了'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '6',
      user: {
        name: '黄大仙',
        avatar: 'images/face-14.jpg',
        email: '251232126@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '明日方舟被代肝代练毁号，兄弟们警惕一下这个人'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '7',
      user: {
        name: '昏睡彪彪',
        avatar: 'images/face-13.jpg',
        email: '2234431234966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '光遇待跑图献祭被骗，各位警惕一下'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '8',
      user: {
        name: 'RedRed',
        avatar: 'images/face-5.jpeg',
        email: '223341242966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '光遇购买心和蜡烛被套路案例，虚假店家不发货'
      },
      veri: true,
      type: '虚拟物品交易'
    },
    {
      key: '9',
      user: {
        name: 'WhatTheH',
        avatar: 'images/face-4.jpg',
        email: '253243426@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '原神代肝周本被毁号了。。。'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '10',
      user: {
        name: 'JKJbk',
        avatar: 'images/face-4.jpg',
        email: '2523232366@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '在交易猫上又双叒叕被骗了！！！！'
      },
      veri: true,
      type: '账号交易'
    },
    {
      key: '10',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '10',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '10',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '10',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
    {
      key: '10',
      user: {
        name: 'WeiHao.L',
        avatar: 'images/face-4.jpg',
        email: '2569982966@qq.com'
      },
      reportInfo: {
        link: '/test',
        data: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容'
      },
      veri: true,
      type: '游戏代练'
    },
  ];

	export default ({
		components: {
      CardInfoTable
		},
		data() {
			return {
        // Associating table data with its corresponding property.
        tableData,

        // Associating table columns with its corresponding property.
        tableColumns,
        caseInfoList: null,

      }
		},
    methods:{
      getCaseData(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCase", //后端请求的路径
          method: "get",

        }).then((response) => {
          // console.log(response.data)
          if (response.data.status == 0) {
            // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {

            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      },
      getCaseDataFinish(){
        console.log("1231")
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCaseFinish", //后端请求的路径
          method: "get",

        }).then((response) => {
          // console.log(response.data)
          if (response.data.status == 0) {
            // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {

            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      },
      getCaseDataNoFinish(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          url: "/api/case/getAllCaseNoFinish", //后端请求的路径
          method: "get",

        }).then((response) => {

          if (response.data.status == 0) {
            // 循环遍历
            var preList = response.data.data
            for (let i = 0; i < preList.length; i++) {

            }
            this.caseInfoList = response.data.data
            console.log(this.caseInfoList)
          }
        });
      }

    },
    mounted() {
      this.getCaseDataFinish()
    }
  })

</script>

<style lang="scss">
</style>